<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠标悬浮帧动画</title>
  <style>
    .ide{
      width: 160px;
      height: 160px;
      background-image: url('./ide-icon.png');
      background-size: 160px;
      cursor: pointer;
      background-position-y: -6240px;
    }
    .ide:hover{
      /*
       animation有这些属性
       animation-name: 动画名
       animation-duration: 动画播放时间
       animation-timing-function: 动画执行轨迹，可以是steps()-关键帧，ease-特有的几个运动轨迹单词，cubic-bezier(n,n,n,n)-贝塞尔曲线
       animation-delay: 动画延迟时间
       animation-iteration-count: 执行次数，
       animation-direction: 执行顺序，默认正向, alternate-交替，一次正向一次反向
       animation-fill-mode: 动画执行完后保持的状态，forwords是最终执行状态，即动画执行完，保持执行完结束的动画，both结合alternate使用一般。
       animation-play-state: 动画运行状态，paused-暂停动画，running-运行中

       */

      /*单次动画*/
      /*animation: move 1s steps(39);*/
      /*animation-fill-mode: forwards;*/

      /*无限动画*/
      animation: move 1s steps(39) alternate infinite;
    }
    @keyframes move {
      from{
        background-position-y: -6240px;
      }
      to{
        background-position-y: 0;
      }
    }

    /*理解交替alternate 和 both*/
    .box{
      width: 100%;
      height: 100px;
      background: #555;
      /*animation: boxan 1s linear 3 alternate both;*/
      animation: boxan 1s linear 2 alternate both;
    }
    @keyframes boxan {
      0%{
        transform: translateX(0);
      }
      40%{
        transform: translateX(40px);
      }
      100%{
        transform: translateX(100px);
      }
    }
  </style>
</head>
<body>
<div class="ide"></div>
<div class="box"></div>
</body>
</html>
